import React from'react';
import { Card, Button, Checkbox, Form } from 'antd';
const { Item } = Form;
const { useForm } = Form;
import { useNavigate } from'react-router-dom';

const Authorize = () => {
    const [form] = useForm();
    const navigate = useNavigate();
    const onFinish = (values) => {
        if (values.agree) {
            navigate('/shopping'); // 跳转到 /shopping 路径对应的页面
        } else {
            console.log('请勾选同意条款');
        }
    };
    return (
        <Card
            title="即将前往Seller Central的XXX店铺"
            bordered
            style={{
                width: 400,
                margin: '100px auto',
                padding: 20,
                borderRadius: 5,
                boxShadow: '0 0 5px rgba(0, 0, 0, 0.1)'
            }}
        >
            <p style={{ textAlign: 'center', marginBottom: 20 }}>确认授权前往</p>
            <Button
                type="primary"
                block
                style={{
                    backgroundColor: '#f57c00',
                    borderColor: '#f57c00',
                    marginBottom: 10
                }}
                onClick={() => form.submit()}
            >
                美区
            </Button>
            <Button
                type="primary"
                block
                style={{
                    backgroundColor: '#f57c00',
                    borderColor: '#f57c00'
                }}
            >
                欧区
            </Button>
            <Form
                form={form}
                name="authorizeForm"
                onFinish={onFinish}
            >
                <Form.Item
                    name="agree"
                    valuePropName="checked"
                    style={{ marginTop: 20 }}
                >
                    <Checkbox>
                        您授权跨境卖家中心与Temu卖家中心共享您的账号ID和店铺名称，并已阅读并同意隐私政策
                    </Checkbox>
                </Form.Item>
                <Button
                    type="link"
                    htmlType="submit"
                    style={{ float: 'right' }}
                >
                    提交
                </Button>
            </Form>
        </Card>
    );
};

export default Authorize;